<template>
  <view class="content">
    <!-- 头部 -->
    <view class="header" v-if="showHeader">
      <view class="header-left">
        <image
          class="header-left-icon"
          :src="headerIcon"
        />
        <view class="header-left-title">{{ headerTitle }}</view>
      </view>
      <view class="header-right">
        <text>{{ headerRightText }}</text>
        <uni-icons
          type="right"
          size="16"
          color="#AAAAAA"
        />
      </view>
    </view>
    <!-- 列表 -->
    <view class="list">
      <view
        class="item"
        v-for="(item, index) in items"
        :key="index"
      >
        <image
          class="item-image"
          :src="item.image"
          mode="widthFix"
        />
        <view class="item-top">
          <view
            class="item-tag"
            v-if="item.tagClasses"
            :style="{ backgroundColor: item.tagColor }"
          >
            {{ item.tagText }}
          </view>
          <view class="item-title">{{ item.title }}</view>
        </view>
        <view class="item-price">
          <text v-if="item.salePrice">
            {{ parseFloat(item.salePrice / 100) }}元+
          </text>
          <text>{{ item.credits }}雪王币</text>
        </view>
        <view class="d-flex justify-end">
          <button class="item-btn" :class="[btnTypeClass]">兑换</button>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: "HomeItemList",
  props: {
    showHeader: {
      type: Boolean,
      default: true
    },
    headerIcon: {
      type: String,
      required: false
    },
    headerTitle: {
      type: String,
      required: false
    },
    headerRightText: {
      type: String,
      default: "查看详情"
    },
    items: {
      type: Array,
      required: true,
      default: () => []
    },
    btnType: {
      type: String,
      default: "default"
    }
  },
  computed: {
    btnTypeClass() {
      return "item-btn-" + this.btnType
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  padding: 0 $uni-spacing-row-xl;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: $uni-spacing-row-xl 0;

  &-left {
    display: flex;
    align-items: center;

    &-icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: $uni-spacing-row-base;
    }

    &-title {
      font-size: $uni-font-size-lg;
      color: $uni-text-color;
      font-weight: 600;
    }
  }

  &-right {
    display: flex;
    align-items: center;
    color: $uni-text-color-grey;
    font-size: $uni-font-size-base;
    gap: $uni-spacing-row-base;
  }
}

.list {
  padding: $uni-spacing-row-xl 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: $uni-spacing-row-xl;
}

.item {
  display: flex;
  flex-direction: column;
  gap: $uni-spacing-row-base;

  &-image {
    width: 100%;
  }

  &-top {
    display: flex;
    align-items: center;
    height: 40rpx;
  }

  &-tag {
    height: 36rpx;
    border-radius: 18rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    padding: 0 $uni-spacing-row-xs;
    margin-right: $uni-spacing-row-sm;
  }

  &-title {
    font-size: $uni-font-size-base;
    color: $uni-text-color;
  }

  &-price {
    color: $uni-color-primary;
    font-size: 13px;
  }

  &-btn {
    width: 100rpx;
    height: 42rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: $uni-font-size-base;

    &-default {
      background-color: $uni-color-primary;
      color: #fff;
      border-radius: $uni-border-radius-base;
    }

    &-circle {
      background-color: #fff;
      color: $uni-color-primary;
      border-radius: 21rpx;
      border: 1rpx solid $uni-color-primary;
    }
  }
}
</style>
